import { useCallback, useState } from "react";
// useCallback()

import { memo } from "react";

// 作用：在组件多次渲染的时候缓存函数
const Input = memo(function Input({ onChange }) {
  console.log("Input render");
  return <input onChange={onChange} />;
});

export default function UseCallback() {
  // 传给子组件的函数
  // 下面这个和useMemo有点类似
  const changeHandler = useCallback((value) => console.log(value), []);
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0);
  return (
    <div>
      useCallback <br />
      作用：在组件多次渲染的时候缓存函数（和useMemo有点类似）
      <hr />
      <Input onChange={changeHandler} />
      <button onClick={() => setCount(count + 1)}>+1==={count}</button>
    </div>
  );
}
